<template>
    <!-- 模态窗口 -->
    <modal v-if="show" @close="show = false" class="x-modal-content">
      <div class="chart-content">
        <div class="chart-title">
          <span>图表标题</span>
        </div>
        <div class="btn-box">
          <botton-group :btns="chartBtns"></botton-group>
        </div>
        <Bar width="700px" height="300px" :options="options"></Bar>
        <div class="close-btn" @click="show = false">
          <!--<i class="fa fa-times"></i>-->
        </div>
      </div>
    </modal>
</template>
<script>
  export default {
    name: 'Modal',

    props: {
      options: {
        type: Object
      },
      show: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        chartBtns: [
          {
            name: '24小时',
            value: 1
          },
          {
            name: '7天',
            value: 17
          },
          {
            name: '30天',
            value: 30
          }
        ]
      }
    }
  }
</script>
<style lang="stylus">
</style>